<template>
    <div class="box">
        <!-- 导航栏 -->
        <navlist title="详情"></navlist>
        <!-- 标签页 -->
        <van-tabs :active="active">
            <van-tab title="详情">
                <swiper :images="detail.pics"></swiper>
                <div style="font-weight: bold;font-size: 18px;">{{ detail.goods_name }}</div>
                <div style="color: red;font-weight: bold;font-size: 22px;">${{ detail.goods_price }}</div>
                <div v-html="detail.goods_introduce" style="margin-top: 10rem;"></div>
                <van-action-bar>
                    <van-action-bar-icon icon="chat-o" text="客服" />
                    <van-action-bar-icon icon="cart-o" text="购物车" badge="3" @click="router.push('/shop')" />
                    <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="toShop" />
                    <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
                </van-action-bar>
            </van-tab>
            <van-tab title="介绍">
                <div v-html="detail.goods_introduce"></div>
            </van-tab>
            <van-tab title="评价">内容 3</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from "vue"

import navlist from '@/components/navlist.vue';
import swiper from '@/components/swiper.vue';

const active = ref(0);

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

import { detailApi } from "@/api/api";

let goods_id = ref(route.query.goods_id)
// console.log(goods_id.value)

let detail = ref({})
const detailList = () => {
    detailApi(goods_id.value).then((res) => {
        // console.log(res)
        detail.value = res.data.message
    })
}
detailList()

import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

import _ from "lodash"

// 跳转到购物车
const toShop = _.debounce(() => {
    router.push('/shop')
    store.addShop(detail.value)
}, 700)


</script>

<style lang="scss" scoped></style>